Skip to content

feat: support rtl direction#56

Merged
zombieJ merged 1 commit into
react-component:masterfrom
aojunhao123:claude/rc-listy-rtl-support-06ff5c
Jul 14, 2026
Merged

feat: support rtl direction#56
zombieJ merged 1 commit into
react-component:masterfrom
aojunhao123:claude/rc-listy-rtl-support-06ff5c

Conversation

@aojunhao123

@aojunhao123 aojunhao123 commented Jul 11, 2026

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

  • 新功能

    • 新增 direction 属性,支持 ltr(从左到右)和 rtl(从右到左)布局。
    • 虚拟列表和普通列表均支持 RTL 渲染。
    • 新增 RTL/LTR 切换及虚拟滚动开关示例。
  • 文档

    • 更新 API 文档,补充 direction 属性说明及默认值。
    • 新增 RTL 使用示例页面。
  • 测试

    • 增加方向配置透传及 RTL 列表渲染行为测试。

@vercel

vercel Bot commented Jul 11, 2026

Copy link
Copy Markdown

@aojunhao123 is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Jul 11, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

新增 direction 配置以支持 RTL/LTR 布局,贯通公共 Props、虚拟列表和原始列表渲染,并补充 RTL 示例、文档及行为测试。

Changes

RTL 方向支持

Layer / File(s) Summary
方向配置契约
src/List.tsx, README.md
ListyPropsListComponentProps 增加 direction?: 'ltr' | 'rtl',并更新 API 文档。
方向渲染透传
src/VirtualList/index.tsx, src/RawList/index.tsx
虚拟列表将 direction 传递给 RcVirtualList;原始列表设置 RTL 类名与 dir 属性。
示例与行为验证
docs/examples/rtl.tsx, docs/demos/rtl.md, tests/listy.behavior.test.tsx
新增 RTL/LTR 与 virtual 切换示例页面,并测试虚拟列表透传及原始列表 DOM 表现。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Listy
  participant VirtualList
  participant RcVirtualList
  participant RawList
  Listy->>VirtualList: 传递 direction
  VirtualList->>RcVirtualList: 传递 direction
  Listy->>RawList: 传递 direction
  RawList->>RawList: 设置 rc-listy-rtl 与 dir="rtl"
Loading

Suggested reviewers: zombieJ

Poem

小兔挥爪切 RTL,
列表向右跑得急。
virtual 开关轻轻按,
LTR 也能排整齐。
方向明确,胡萝卜满地!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题清晰概括了本次 PR 的核心变更:为组件新增 RTL direction 支持。
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces support for Right-to-Left (RTL) layout direction in the Listy component by adding a direction prop ('ltr' | 'rtl'). This prop is forwarded to both RawList (applying the dir attribute and -rtl class) and VirtualList. A demo, an example, and tests are added to verify this behavior. The reviewer suggested updating the documentation in README.md to show that the default value of direction is '-' (undefined/inherited) rather than 'ltr', to accurately reflect the implementation.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread README.md Outdated
@aojunhao123 aojunhao123 force-pushed the claude/rc-listy-rtl-support-06ff5c branch from 771354c to fa668ee Compare July 11, 2026 07:59

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
tests/listy.behavior.test.tsx (1)

504-517: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

补充默认方向的测试覆盖。

当前测试验证了 direction: 'rtl' 在两种渲染模式下的行为,但缺少 direction 未传入(默认)时的断言——即 raw list 不应有 rc-listy-rtl class 和 dir 属性。建议补充一个默认场景的测试以防止回归。

✅ 建议补充的测试
   it('applies dir and rtl class on the raw list', () => {
     const { container } = renderList({ virtual: false, direction: 'rtl' });

     const holder = container.querySelector('.rc-listy') as HTMLDivElement;

     expect(holder).toHaveClass('rc-listy-rtl');
     expect(holder).toHaveAttribute('dir', 'rtl');
   });
+
+  it('does not apply rtl class or dir attribute by default', () => {
+    const { container } = renderList({ virtual: false });
+
+    const holder = container.querySelector('.rc-listy') as HTMLDivElement;
+
+    expect(holder).not.toHaveClass('rc-listy-rtl');
+    expect(holder).not.toHaveAttribute('dir');
+  });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/listy.behavior.test.tsx` around lines 504 - 517, 补充默认方向的测试覆盖:在“applies
dir and rtl class on the raw list”附近新增未传入 direction 的场景,使用 raw list 渲染并断言容器不包含
rc-listy-rtl class 且不具有 dir 属性;保留现有 direction: 'rtl' 的断言不变。
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@tests/listy.behavior.test.tsx`:
- Around line 504-517: 补充默认方向的测试覆盖:在“applies dir and rtl class on the raw
list”附近新增未传入 direction 的场景,使用 raw list 渲染并断言容器不包含 rc-listy-rtl class 且不具有 dir
属性;保留现有 direction: 'rtl' 的断言不变。

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ec7192d9-0dbc-47c1-afc9-20d93bd4544c

📥 Commits

Reviewing files that changed from the base of the PR and between 13f952a and 771354c.

📒 Files selected for processing (7)
  • README.md
  • docs/demos/rtl.md
  • docs/examples/rtl.tsx
  • src/List.tsx
  • src/RawList/index.tsx
  • src/VirtualList/index.tsx
  • tests/listy.behavior.test.tsx

@codecov

codecov Bot commented Jul 11, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (13f952a) to head (eab2024).

Additional details and impacted files
@@            Coverage Diff            @@
##            master       #56   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            8         8           
  Lines          211       211           
  Branches        62        62           
=========================================
  Hits           211       211           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Add a `direction?: 'ltr' | 'rtl'` prop threaded to both list backends:

- VirtualList forwards `direction` to the underlying
  `@rc-component/virtual-list`, which sets `dir`, the `rc-listy-rtl`
  class, flips the scrollbar, and exposes `rtl` to sticky-header logic.
- RawList sets `dir` and the `rc-listy-rtl` class on its root for parity.

No CSS mirroring needed — the sticky/fixed group header already spans
the full width (`left:0; right:0`), so it is direction-agnostic.

Adds an RTL demo, README prop docs, and tests covering both backends.
@aojunhao123 aojunhao123 force-pushed the claude/rc-listy-rtl-support-06ff5c branch from fa668ee to eab2024 Compare July 11, 2026 08:12
@zombieJ zombieJ merged commit 6fb43b7 into react-component:master Jul 14, 2026
10 of 11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants